<script setup>

import {ref, onMounted, watch, computed} from 'vue';
import axios from "axios";
import {snackbar} from './store'
import moment from "moment"
import QRCode from "qrcode"

// 查询
const itemsPerPage = ref(10);
const pageNo = ref(1);
const headers = [
    {title: '序号', key: 'num', sortable: false},
    {title: '活动名称', key: 'name', sortable: false},
    {title: '活动地址', key: 'address', sortable: false},
    {title: '活动编号', key: 'code', sortable: false},
    {title: '报名截止时间', key: 'signupEndTime', sortable: false},
    {title: '报名状态', key: 'signupStatus', sortable: false},
    // {title: '经度', key: 'aLon', sortable: false},
    // {title: '纬度', key: 'aLat', sortable: false},
    {title: '开始时间', key: 'startTime', sortable: false},
    {title: '结束时间', key: 'endTime', sortable: false},
    {title: '活动裁判', key: 'judgeIds', sortable: false},
    {title: '起始分数', key: 'initScore', sortable: false, align: 'center'},
    {title: '活动状态', key: 'isStart', sortable: false, align: 'center'},
    {title: '操作', key: 'actions', sortable: false}
];
const items = ref([]);
const loading = ref(true);
const totalItems = ref(0);
const baseUrl = ref('http://101.68.222.195:5179/#/');

const isShowDialogStart = ref(false);
const isShowDialogEnd = ref(false);
const isShowDialogSignup = ref(false);
const dateSearchStart = ref(new Date());
const dateSearchStartTime = ref(null);
const dateSearchEnd = ref(new Date());
const dateSearchSignup = ref(new Date());
const dateSearchEndTime = ref(null);
const dateSearchSignupTime = ref(null);
const judgeList = ref([]);
const search = ref('');
const name = ref(null);

const checkShow = ref(false);
const checkData = ref(null);
const checkSearch = ref('');
const checkItemsPerPage = ref(10);
const checkPageNo = ref(1);
const checkHeaders = ref([
    {title: '序号', key: 'num', sortable: false},
    {title: '企业名称', key: 'companyName', sortable: false},
    {title: '起始分数', key: 'initScore', sortable: false},
    {title: '企业类型', key: 'isPrivate', sortable: false},
    {title: '操作', key: 'actions', sortable: false}
]);
const checkTotalItems = ref(0);
const checkItems = ref([]);
const checkLoading = ref(false);
const checkName = ref(null);
const isShowDialogCheck = ref(false);
const typeList = ref([
    {id:'48',companyName:'党委机关'},
    {id:'50',companyName:'事业单位'},
    {id:'51',companyName:'电子政务'},
    {id:'52',companyName:'政府机关'},
    {id:'53',companyName:'大型国企'},
    {id:'54',companyName:'其他单位'}
]);
const companyList = ref([]);
const companyTreeList = ref([]);
const companyTreeListPrivate = ref([]);
const companyTreeListPublic = ref([]);
const privateShow = ref(false);
const publicShow = ref(false);
watch(name, () => {
    search.value = name.value
})
watch(checkName, () => {
    checkSearch.value = checkName.value
})

function clickCheckShow(item) {
    checkShow.value = true
    checkData.value = item
}

function loadItemsCheck({page, itemsPerPage}) {
    checkPageNo.value = page
    checkLoading.value = true;
    axios.post('/activityJoin/select', {
        pageNo: checkPageNo.value,
        pageSize: itemsPerPage,
        activityId: checkData.value.id,
        companyName: checkName.value
    }).then(res => {
        checkItems.value = res.data.records;
        checkTotalItems.value = res.data.total;
        checkLoading.value = false;
    })
}

function loadItems({page, itemsPerPage}) {
    pageNo.value = page
    loading.value = true;
    axios.post('/activity/select', {
        pageNo: pageNo.value,
        pageSize: itemsPerPage,
        name: name.value
    }).then(res => {
        items.value = res.data.records;
        items.value.forEach(item => [
            item.signupStatus += ''
        ])
        totalItems.value = res.data.total;
        loading.value = false;
    })
}

onMounted(() => {
    axios.post('/basJudge/selectPage', {
        pageNo: 1,
        pageSize: 1000,
        status: 1
    }).then(res => {
        judgeList.value = res.data.records;
    })
    axios.post('/companyDefend/select', {
        pageNo: 1,
        pageSize: 10000,
        delFlag: 1
    }).then(res => {
        companyList.value = res.data.records;
        companyTreeList.value = JSON.parse(JSON.stringify(typeList.value))
        companyTreeList.value.forEach(item => {
            item.children = []
            companyList.value.forEach(k => {
                if(item.id == k.companyType) {
                    item.children.push({
                        companyName: k.companyName,
                        id: k.id,
                        disabled: true
                    })
                }
            })
        })
        companyTreeList.value.forEach(item => {
            item.companyName += `(${item.children.length})`
        })
    })
});

// 增改
const isShowDialog = ref(false)
const dialogEnum = {
    update: '编辑',
    create: '新增'
}
const dialogEnumCheck = {
    update: '编辑防守企业',
    create: '新增防守企业'
}
const dialogType = ref(null)
const dialogTypeCheck = ref(null)
const isShowDeleteDialog = ref(false)
const isShowSignDialog = ref(false)
const isShowDeleteDialogCheck = ref(false)
const editedItem = ref({
    code: "",
    name: "",
    address: "",
    aLon: "",
    aLat: "",
    startTime: "",
    endTime: "",
    signupEndTime: "",
    signupStatus: "1",
    ruleId: 0,
    initScore: 5000,
    judgeIds: []
});
const editedItemCheck = ref({
    initScore: 5000,
    activityId: "",
    privateDefendIdStr: '',
    privateDefendIdStrName: '',
    privateDefendIdList: [],
    publicDefendIdStr: '',
    publicDefendIdStrName: '',
    publicDefendIdList: []
});

function changePrivate() {
    editedItemCheck.value.privateDefendIdStr = editedItemCheck.value.privateDefendIdList.join(',') // 字符串提交
    let arr = []
    let obj = JSON.parse(JSON.stringify(companyList.value))
    editedItemCheck.value.privateDefendIdList.forEach(item => {
        companyList.value.forEach(k => {
            if(item == k.id) {
                arr.push(k.companyName)
            }
        })
        obj.forEach((k, i) => {
            if(item == k.id) {
                obj.splice(i, 1)
            }
        })
    })
    let treeList = JSON.parse(JSON.stringify(typeList.value))
    treeList.forEach(tree => {
        tree.children = []
        obj.forEach(k => {
            if(tree.id == k.companyType) {
                tree.children.push({
                    companyName: k.companyName,
                    id: k.id,
                    disabled: true
                })
            }
        })
    })
    treeList.forEach(item => {
        item.companyName += `(${item.children.length})`
    })
    companyTreeListPublic.value = treeList
    editedItemCheck.value.privateDefendIdStrName = arr.join(',') // 显示企业名称
}

function changePublic() {
    editedItemCheck.value.publicDefendIdStr = editedItemCheck.value.publicDefendIdList.join(',')
    let arr = []
    let obj = JSON.parse(JSON.stringify(companyList.value))
    editedItemCheck.value.publicDefendIdList.forEach(item => {
        companyList.value.forEach(k => {
            if(item == k.id) {
                arr.push(k.companyName)
            }
        })
        obj.forEach((k, i) => {
            if(item == k.id) {
                obj.splice(i, 1)
            }
        })
    })
    let treeList = JSON.parse(JSON.stringify(typeList.value))
    treeList.forEach(tree => {
        tree.children = []
        obj.forEach(k => {
            if(tree.id == k.companyType) {
                tree.children.push({
                    companyName: k.companyName,
                    id: k.id,
                    disabled: true
                })
            }
        })
    })
    treeList.forEach(item => {
        item.companyName += `(${item.children.length})`
    })
    companyTreeListPrivate.value = treeList
    editedItemCheck.value.publicDefendIdStrName = arr.join(',')
}

function changeDate() {
    editedItem.value.startTime = moment(dateSearchStart.value).format('YYYY-MM-DD') + ' ' + dateSearchStartTime.value + ':00'
    isShowDialogStart.value = false
}

function changeDateEnd() {
    editedItem.value.endTime = moment(dateSearchEnd.value).format('YYYY-MM-DD') + ' ' + dateSearchEndTime.value + ':00'
    isShowDialogEnd.value = false
}

function changeDateSignup() {
    editedItem.value.signupEndTime = moment(dateSearchSignup.value).format('YYYY-MM-DD') + ' ' + dateSearchSignupTime.value + ':00'
    isShowDialogSignup.value = false
}

function resetEditedItem() {
    editedItem.value = {
        code: "",
        name: "",
        address: "",
        aLon: "",
        aLat: "",
        startTime: "",
        endTime: "",
        signupEndTime: "",
        signupStatus: "1",
        ruleId: 0,
        initScore: 5000,
        judgeIds: []
    }
    editedItemCheck.value = {
        initScore: 5000,
        activityId: "",
        privateDefendIdStr: '',
        privateDefendIdStrName: '',
        privateDefendIdList: [],
        publicDefendIdStr: '',
        publicDefendIdStrName: '',
        publicDefendIdList: []
    }
    companyTreeListPrivate.value = companyTreeList.value
    companyTreeListPublic.value = companyTreeList.value
    privateShow.value = false
    publicShow.value = false
}

function clickNewCheck() {
    resetEditedItem()
    dialogTypeCheck.value = dialogEnumCheck.create
    editedItemCheck.value.activityId = checkData.value.id
    isShowDialogCheck.value = true
}

function clickNew() {
    resetEditedItem()
    dialogType.value = dialogEnum.create
    isShowDialog.value = true
}

function closeCheck() {
    isShowDialogCheck.value = false
    resetEditedItem()
    dialogTypeCheck.value = null
}

function close() {
    isShowDialog.value = false
    resetEditedItem()
    dialogType.value = null
}

function clickEditCheck(item) {
    editedItemCheck.value = Object.assign({}, item)
    editedItemCheck.value.privateDefendIdStr = editedItemCheck.value.privateDefendIdStr.split(",") 
    isShowDialogCheck.value = true
    dialogTypeCheck.value = dialogEnumCheck.update
}

function clickEdit(item) {
    editedItem.value = Object.assign({}, item)
    editedItem.value.status += ""
    editedItem.value.judgeIds = editedItem.value.judgeIds.split(',').map(item => Number(item))
    isShowDialog.value = true
    dialogType.value = dialogEnum.update
}

function saveCheck() {
    let obj = JSON.parse(JSON.stringify(editedItemCheck.value))
    if(obj.privateDefendIdList.some(item => obj.publicDefendIdList.includes(item))) {
        snackbar.info('私有企业和公有企业不能重复！')
        return
    }
    // obj.privateDefendIdStr = obj.privateDefendIdStr.join(",")
    // obj.publicDefendIdStr = obj.publicDefendIdStr.join(",")
    if (dialogTypeCheck.value === dialogEnumCheck.update) {
        axios({
            method: 'POST',
            url: '/activityJoin/update',
            data: obj
        }).then(() => {
            snackbar.info('编辑成功')
            closeCheck()
            loadItemsCheck({page: checkPageNo.value, itemsPerPage: checkItemsPerPage.value})
        })
    } else if (dialogTypeCheck.value === dialogEnumCheck.create) {
        axios({
            method: 'POST',
            url: '/activityJoin/save',
            data: obj
        }).then((res) => {
            snackbar.info('创建成功')
            closeCheck()
            loadItemsCheck({page: checkPageNo.value, itemsPerPage: checkItemsPerPage.value})
        })
    }
}

function save() {
    if(!editedItem.value.judgeIds.length) {
        snackbar.info("请选择裁判！")
        return
    }
    let obj = JSON.parse(JSON.stringify(editedItem.value))
    obj.judgeIds = obj.judgeIds.join(',')
    if (dialogType.value === dialogEnum.update) {
        axios({
            method: 'POST',
            url: '/activity/update',
            data: obj
        }).then(() => {
            snackbar.info('编辑成功')
            close()
            loadItems({page: pageNo.value, itemsPerPage: itemsPerPage.value})
        })
    } else if (dialogType.value === dialogEnum.create) {
        axios({
            method: 'POST',
            url: '/activity/save',
            data: obj
        }).then((res) => {
            console.log(res.data)
            snackbar.info('创建成功')
            close()
            loadItems({page: pageNo.value, itemsPerPage: itemsPerPage.value})
        })
    }
}

// 删
const beDeleteItem = ref({})
const beDeleteItemCheck = ref({})

function clickDeleteCheck(item) {
    isShowDeleteDialogCheck.value = true
    beDeleteItemCheck.value = item
}

function clickDeleteConfirmCheck() {
    axios.post('/activityJoin/delete', { id: beDeleteItemCheck.value.id }).then(() => {
        snackbar.info("删除成功")
        loadItemsCheck({page: pageNo.value, itemsPerPage: itemsPerPage.value})
        clickCloseDeleteCheck()
    })
}

function clickCloseDeleteCheck() {
    isShowDeleteDialogCheck.value = false
    beDeleteItemCheck.value = {}
}

function clickDelete(item) {
    isShowDeleteDialog.value = true
    beDeleteItem.value = item
}

function clickDeleteSign(item) {
    isShowSignDialog.value = true
    beDeleteItem.value = item
}

function clickDeleteConfirm() {
    if(!beDeleteItem.value.isStart) {
        axios.post('/activity/startActivity', { id: beDeleteItem.value.id }).then(() => {
            snackbar.info("开启成功")
            loadItems({page: pageNo.value, itemsPerPage: itemsPerPage.value})
            clickCloseDelete()
        })        
    } else {
        axios.post('/activity/stopActivity', { id: beDeleteItem.value.id }).then(() => {
            snackbar.info("关闭成功")
            loadItems({page: pageNo.value, itemsPerPage: itemsPerPage.value})
            clickCloseDelete()
        })
    }
}

function changeSign(item) {
    beDeleteItem.value = item
    clickDeleteSignConfirm()
}

function clickDeleteSignConfirm() {
    if(beDeleteItem.value.signupStatus == 1) {
        axios.post('/activity/changeSignStatus', { id: beDeleteItem.value.id, signupStatus: 1 }).then(() => {
            snackbar.info("开启成功")
            loadItems({page: pageNo.value, itemsPerPage: itemsPerPage.value})
            clickCloseDelete()
        })        
    } else {
        axios.post('/activity/changeSignStatus', { id: beDeleteItem.value.id, signupStatus: 2 }).then(() => {
            snackbar.info("关闭成功")
            loadItems({page: pageNo.value, itemsPerPage: itemsPerPage.value})
            clickCloseDelete()
        })
    }
}

function clickCloseDelete() {
    isShowDeleteDialog.value = false
    isShowSignDialog.value = false
    beDeleteItem.value = {}
}

const isShowSwap = ref(false);
const beSwapItem = ref({});

function clickSwap(item) {
    isShowSwap.value = true
    beSwapItem.value = item
}

function clickCloseSwap() {
    isShowSwap.value = false
    beSwapItem.value = {}
}

function clickSwapConfirm() {
    axios.post('/activityJoin/update', { id: beSwapItem.value.id, isPrivate: beSwapItem.value.isPrivate ? 0 : 1 }).then(() => {
        snackbar.info("修改成功")
        loadItemsCheck({page: pageNo.value, itemsPerPage: itemsPerPage.value})
        clickCloseSwap()
    })
}

const qrcodeShow = ref(false);
const QRCode_header = ref(null);
const qrurl = ref(null);
function clickQrcode(row) {
    qrcodeShow.value = true
    setTimeout(() => {
        qrurl.value = `${baseUrl.value}mobile?id=${row.id}`
        let opts = {
          errorCorrectionLevel: "H", //容错级别
          type: "image/png", //生成的二维码类型
          quality: 0.3, //二维码质量
          margin: 0, //二维码留白边距
          width: 280, //宽
          height: 280, //高
          text: qrurl.value, //二维码内容
          color: {
            dark: "#333333", //前景色
            light: "#fff", //背景色
          },
          title: 'gggg'
        };
        let that = this
        // 将获取到的数据（val）画到msg（canvas）上
        QRCode.toCanvas(QRCode_header.value, qrurl.value, opts, function (error) {
          if (error) {
            console.log("二维码加载失败", error);
            return
          }
          const qrText = row.name
          const size = 280
          const fontWeight = 'bold'
          const fontSize = 16
          const tb = 12
          const realHeight = size + fontSize + 2*tb
          const ctx = QRCode_header.value.getContext("2d");
          const data = ctx.getImageData(0, 0, size, size);
          ctx.fillStyle = "#ffffff"
          QRCode_header.value.setAttribute('height', realHeight); // 重设画布像素高度
          QRCode_header.value.style.setProperty('height', realHeight + 'px'); // 重设画布实际高度
          ctx.fillRect(0, 0, size, realHeight)
          ctx.putImageData(data, 0, 0)// 填充二维码数据
          ctx.font = `${fontWeight} ${fontSize}px Arial`;
          const textWidth = ctx.measureText(qrText).width; //文字真实宽度
          const ftop = size + tb; //文字距顶部位置
          const fleft = (size - textWidth) / 2; //根据字体大小计算文字left
          const textPadding = fontSize / 2; //字体边距为字体大小的一半可以自己设置
          // 设置底部背景色
          ctx.fillStyle = "#eaeaea";
          ctx.fillRect(0, size, size, realHeight - 2*tb);
          // 设置字体填充位置
          ctx.fillRect(
            fleft - textPadding / 2,
            ftop - textPadding / 2,
            textWidth + textPadding,
            fontSize + textPadding
          );
          ctx.textBaseline = "top"; //设置绘制文本时的文本基线。
          ctx.fillStyle = "#333";// 字体颜色
          ctx.fillText(qrText, fleft, ftop)
        });
    })
}

const zipItem = ref({})
const zipShow = ref(false)
function clickZip(item) {
    zipItem.value = {}
    zipItem.value = JSON.parse(JSON.stringify(item))
    zipShow.value = true
}

function saveZip() {
    let obj = {
        id: zipItem.value.id,
        contactName: zipItem.value.contactName,
        contactPhone: zipItem.value.contactPhone
    }
    axios({
        method: "POST",
        url: "/activity/generateReport",
        responseType: 'blob',
        data: obj
    }).then(res => {
        console.log(res.data)
    }, err => {
        zipShow.value = false
        zipItem.value = {}
        snackbar.info("开始下载")
        let blob = new Blob([err.data], {type: "application/zip"});
        let fileName = `下载报告.zip`
        if ("download" in document.createElement("a")) {
            // 支持a标签download的浏览器
            const link = document.createElement("a"); // 创建a标签
            link.download = fileName; // a标签添加属性
            link.style.display = "none";
            link.href = URL.createObjectURL(blob);
            document.body.appendChild(link);
            link.click(); // 执行下载
            URL.revokeObjectURL(link.href); // 释放url
            document.body.removeChild(link); // 释放标签
        } else {
            // 其他浏览器
            navigator.msSaveBlob(blob, fileName);
        }
    })
}

function clickDownload(item) {
    let obj = {
        id: item.id,
        name: item.name,
        judgeIds: item.judgeIds
    }
    axios({
        method: "POST",
        url: "/activity/export",
        responseType: 'blob',
        data: obj
    }).then(res => {
        console.log(res.data)
    }, err => {
        snackbar.info("开始下载")
        let blob = new Blob([err.data], {type: "application/vnd.ms-excel"});
        let fileName = `活动人员.xlsx`
        if ("download" in document.createElement("a")) {
            // 支持a标签download的浏览器
            const link = document.createElement("a"); // 创建a标签
            link.download = fileName; // a标签添加属性
            link.style.display = "none";
            link.href = URL.createObjectURL(blob);
            document.body.appendChild(link);
            link.click(); // 执行下载
            URL.revokeObjectURL(link.href); // 释放url
            document.body.removeChild(link); // 释放标签
        } else {
            // 其他浏览器
            navigator.msSaveBlob(blob, fileName);
        }
    })
}

function clickCokpit(item) {
    let url = 'http://101.68.222.195:51791/#/?id=' + item.id + '&token=' + localStorage.getItem("token")
    window.open(url)
}
</script>

<template>
    <v-toolbar density="compact">
        <v-toolbar-title>活动管理</v-toolbar-title>
        <v-text-field v-model="name" :clearable="true" hide-details label="查询活动名称"></v-text-field>
        <v-dialog v-model="isShowDialog" max-width="500px">
            <template v-slot:activator="{ props }">
                <v-btn icon="mdi-plus" v-on:click="clickNew" v-bind="props"></v-btn>
            </template>
            <v-card>
                <v-card-title>{{ dialogType }}</v-card-title>
                <v-card-text>
                    <v-text-field v-model="editedItem.code" label="活动编号" required></v-text-field>
                    <v-text-field v-model="editedItem.name" label="活动名称" required></v-text-field>
                    <v-text-field v-model="editedItem.address" label="活动地址" required></v-text-field>
                    <!-- <v-text-field v-model="editedItem.aLon" label="经度" required></v-text-field>
                    <v-text-field v-model="editedItem.aLat" label="纬度" required></v-text-field> -->
                    <v-text-field
                    v-model="editedItem.startTime"
                    label="开始时间"
                    required
                    readonly
                    @click="isShowDialogStart = true"></v-text-field>
                    <v-dialog v-model="isShowDialogStart" max-width="360px">
                        <v-card>
                            <v-card-title>
                                <v-date-picker v-model="dateSearchStart"></v-date-picker>
                                <v-time-picker v-model="dateSearchStartTime" format="24hr"></v-time-picker>
                            </v-card-title>
                            <v-card-actions>
                                <v-spacer></v-spacer>
                                <v-btn color="blue-darken-1" variant="text" @click="isShowDialogStart = false">取消</v-btn>
                                <v-btn color="blue-darken-1" variant="text" @click="changeDate">确定</v-btn>
                                <v-spacer></v-spacer>
                            </v-card-actions>
                        </v-card>
                    </v-dialog>
                    <v-text-field
                    v-model="editedItem.endTime"
                    readonly
                    @click="isShowDialogEnd = true"
                    label="结束时间"
                    required></v-text-field>
                    <v-dialog v-model="isShowDialogEnd" max-width="360px">
                        <v-card>
                            <v-card-title>
                                <v-date-picker v-model="dateSearchEnd"></v-date-picker>
                                <v-time-picker v-model="dateSearchEndTime" format="24hr"></v-time-picker>
                            </v-card-title>
                            <v-card-actions>
                                <v-spacer></v-spacer>
                                <v-btn color="blue-darken-1" variant="text" @click="isShowDialogEnd = false">取消</v-btn>
                                <v-btn color="blue-darken-1" variant="text" @click="changeDateEnd">确定</v-btn>
                                <v-spacer></v-spacer>
                            </v-card-actions>
                        </v-card>
                    </v-dialog>
                    <v-text-field
                    v-model="editedItem.signupEndTime"
                    readonly
                    @click="isShowDialogSignup = true"
                    label="报名截止时间"
                    required></v-text-field>
                    <v-dialog v-model="isShowDialogSignup" max-width="360px">
                        <v-card>
                            <v-card-title>
                                <v-date-picker v-model="dateSearchSignup"></v-date-picker>
                                <v-time-picker v-model="dateSearchSignupTime" format="24hr"></v-time-picker>
                            </v-card-title>
                            <v-card-actions>
                                <v-spacer></v-spacer>
                                <v-btn color="blue-darken-1" variant="text" @click="isShowDialogSignup = false">取消</v-btn>
                                <v-btn color="blue-darken-1" variant="text" @click="changeDateSignup">确定</v-btn>
                                <v-spacer></v-spacer>
                            </v-card-actions>
                        </v-card>
                    </v-dialog>
                    <v-text-field v-model="editedItem.initScore" label="起始分数" required></v-text-field>
                    <v-autocomplete
                    v-model="editedItem.judgeIds"
                    label="活动裁判"
                    :items="judgeList"
                    item-title="name"
                    item-value="id"
                    multiple
                    required></v-autocomplete>
                </v-card-text>
                <v-card-actions>
                    <v-btn color="primary" variant="text" @click="close">关闭</v-btn>
                    <v-btn color="primary" variant="text" @click="save">确定</v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
        <v-dialog v-model="isShowSignDialog" max-width="500px">
            <v-card>
                <v-card-title class="text-h5">确定{{ beDeleteItem.signupStatus == 1 ? '关闭' : '开启' }}'{{ beDeleteItem.name }}'活动报名?</v-card-title>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn color="blue-darken-1" variant="text" @click="clickCloseDelete">取消</v-btn>
                    <v-btn color="blue-darken-1" variant="text" @click="clickDeleteSignConfirm">确定</v-btn>
                    <v-spacer></v-spacer>
                </v-card-actions>
            </v-card>
        </v-dialog>
        <v-dialog v-model="isShowDeleteDialog" max-width="500px">
            <v-card>
                <v-card-title class="text-h5">确定{{ beDeleteItem.isStart ? '关闭' : '开启' }}'{{ beDeleteItem.name }}'?</v-card-title>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn color="blue-darken-1" variant="text" @click="clickCloseDelete">取消</v-btn>
                    <v-btn color="blue-darken-1" variant="text" @click="clickDeleteConfirm">确定</v-btn>
                    <v-spacer></v-spacer>
                </v-card-actions>
            </v-card>
        </v-dialog>
    </v-toolbar>
  <!--  分页文本待更换   items-per-page-text="每页数量"-->
    <v-data-table-server :search="search" :items-per-page="itemsPerPage" :headers="headers" :items-length="totalItems"
    :items="items"
    :loading="loading"
    class="elevation-1"
    items-per-page-text="每页数量"
    @update:options="loadItems">
        <template v-slot:item.num="{ index }">
            <span>{{ index + 1 }}</span>
        </template>
        <template v-slot:item.judgeIds="{ item }">
            <span v-if="item.judgeIds" v-for="item in item.judgeIds.split(',')">
                <font v-for="k in judgeList" v-show="k.id == item">{{ k.name }}&nbsp;&nbsp;</font>
            </span>
        </template>
        <template v-slot:item.signupStatus="{item}">
            <!-- <span v-if="item.signupStatus == 1">已开启</span>
            <span v-if="item.signupStatus == 2">已截止</span>
            &nbsp;
            <v-btn variant="tonal" @click="clickDeleteSign(item)" v-if="item.signupStatus == 2">开启</v-btn>
            <v-btn variant="tonal" @click="clickDeleteSign(item)" v-if="item.signupStatus == 1">关闭</v-btn> -->
            <v-switch
            v-model="item.signupStatus"
            @change="changeSign(item)"
            :label="item.signupStatus == 1 ? '开启' : '关闭'"
            inset
            hide-details
            color="primary"
            label="primary"
            false-value="2"
            true-value="1"
            value="primary"></v-switch>
        </template>
        <template v-slot:item.isStart="{item}">
            <span v-if="item.isStart == 1">已开启</span>
            <span v-if="item.isStart == 2">已结束</span>
            <span v-if="!item.isStart">未开启</span>
        </template>
        <template v-slot:item.actions="{ item }">
            <v-tooltip text="编辑" location="bottom">
                <template v-slot:activator="{ props }">
                    <v-btn v-bind="props" icon="mdi-pencil" variant="text" @click="clickEdit(item)"></v-btn>
                </template>
            </v-tooltip>
            <v-tooltip text="活动配置" location="bottom">
                <template v-slot:activator="{ props }">
                    <v-btn v-bind="props" icon="mdi-cog" variant="text"  @click="clickCheckShow(item)"></v-btn>
                </template>
            </v-tooltip>
            <v-tooltip text="报名二维码" location="bottom">
                <template v-slot:activator="{ props }">
                    <v-btn v-bind="props" icon="mdi-qrcode" variant="text" @click="clickQrcode(item)"></v-btn>
                </template>
            </v-tooltip>
            <v-tooltip text="下载报告" location="bottom">
                <template v-slot:activator="{ props }">
                    <v-btn v-bind="props" icon="mdi-folder-zip" variant="text" @click="clickZip(item)"></v-btn>
                </template>
            </v-tooltip>
            <v-tooltip text="参赛人员信息" location="bottom">
                <template v-slot:activator="{ props }">
                    <v-btn v-bind="props" icon="mdi-account-arrow-down" variant="text" @click="clickDownload(item)"></v-btn>
                </template>
            </v-tooltip>
            <v-tooltip text="活动驾驶舱" location="bottom">
                <template v-slot:activator="{ props }">
                    <v-btn v-bind="props" icon="mdi-aspect-ratio" variant="text" @click="clickCokpit(item)"></v-btn>
                </template>
            </v-tooltip>
            <v-tooltip text="开启活动" location="bottom" v-if="item.isStart == 0">
                <template v-slot:activator="{ props }">
                    <v-btn v-bind="props" icon="mdi-lock-open-variant" variant="text"  @click="clickDelete(item)"></v-btn>
                </template>
            </v-tooltip>
            <v-tooltip text="关闭活动" location="bottom" v-if="item.isStart == 1">
                <template v-slot:activator="{ props }">
                    <v-btn v-bind="props" icon="mdi-power" variant="text"  @click="clickDelete(item)"></v-btn>
                </template>
            </v-tooltip>
        </template>
    </v-data-table-server>

    <v-dialog v-model="zipShow" max-width="500px">
        <v-card>
            <v-card-title>下载报告</v-card-title>
            <v-card-text>
                <v-text-field v-model="zipItem.contactName" label="报告人姓名"></v-text-field>
                <v-text-field v-model="zipItem.contactPhone" label="报告人手机号"></v-text-field>
            </v-card-text>
            <v-card-actions>
                <v-btn color="primary" variant="text" @click="zipShow = false">关闭</v-btn>
                <v-btn color="primary" variant="text" @click="saveZip">下载</v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>

    <v-dialog v-model="qrcodeShow" max-width="500px">
        <v-card>
            <v-toolbar>
                <v-card-title>报名活动二维码</v-card-title> 
            </v-toolbar>
                <div style="display: flex;justify-content: center;margin: 20px;">
                    <canvas ref="QRCode_header" style="width: 280px; height: 280px"></canvas>        
                </div>     
        </v-card>
    </v-dialog>

    <v-dialog
    v-model="checkShow"
    max-width="800px"
    transition="dialog-bottom-transition">
        <v-card>
            <v-toolbar density="compact">
                <v-btn icon="mdi-close" @click="checkShow = false"></v-btn>
                <v-toolbar-title>{{ checkData.name }}</v-toolbar-title>
                <v-text-field v-model="checkName" :clearable="true" hide-details label="查询企业名称"></v-text-field>
                <v-dialog v-model="isShowDialogCheck" max-width="500px">
                    <template v-slot:activator="{ props }">
                        <v-btn prepend-icon="mdi-plus" v-on:click="clickNewCheck" v-bind="props">新增防守企业</v-btn>
                    </template>
                    <v-card>
                        <v-card-title>{{ dialogTypeCheck }}</v-card-title>
                        <v-card-text>
                            <v-text-field v-model="editedItemCheck.initScore" label="初始分数" required></v-text-field>
                            <!-- <v-autocomplete
                            v-model="editedItemCheck.privateDefendIdStr"
                            label="私有企业"
                            :items="companyList"
                            item-title="companyName"
                            item-value="id"
                            multiple
                            ></v-autocomplete> -->
                            <v-textarea
                            v-model="editedItemCheck.privateDefendIdStrName"
                            label="私有企业"
                            hint="私有企业与公有企业不可重复"
                            rows="1"
                            :append-inner-icon="!privateShow ? 'mdi-menu-down' : 'mdi-menu-up'"
                            auto-grow
                            readonly
                            @click="privateShow = !privateShow"></v-textarea>
                            <v-treeview
                            v-show="privateShow"
                            v-model:selected="editedItemCheck.privateDefendIdList"
                            @change="changePrivate"
                            :items="companyTreeListPrivate"
                            selectable
                            item-title="companyName"
                            item-value="id"
                            select-strategy="classic"
                            ></v-treeview>
                            <v-textarea
                            v-model="editedItemCheck.publicDefendIdStrName"
                            label="公开企业"
                            hint="私有企业与公有企业不可重复"
                            rows="1"
                            :append-inner-icon="!publicShow ? 'mdi-menu-down' : 'mdi-menu-up'"
                            auto-grow
                            readonly
                            @click="publicShow = !publicShow"></v-textarea>
                            <v-treeview
                            v-show="publicShow"
                            v-model:selected="editedItemCheck.publicDefendIdList"
                            @change="changePublic"
                            :items="companyTreeListPublic"
                            selectable
                            item-title="companyName"
                            item-value="id"
                            select-strategy="classic"
                            ></v-treeview>
                            <!-- <v-autocomplete
                            v-model="editedItemCheck.publicDefendIdStr"
                            label="公开企业"
                            :items="companyList"
                            item-title="companyName"
                            item-value="id"
                            multiple
                            ></v-autocomplete> -->
                        </v-card-text>
                        <v-card-actions>
                            <v-btn color="primary" variant="text" @click="closeCheck">关闭</v-btn>
                            <v-btn color="primary" variant="text" @click="saveCheck">确定</v-btn>
                        </v-card-actions>
                    </v-card>
                </v-dialog>
                <v-dialog v-model="isShowDeleteDialogCheck" max-width="500px">
                    <v-card>
                        <v-card-title class="text-h5">确定删除'{{ beDeleteItemCheck.companyName }}'?</v-card-title>
                        <v-card-actions>
                            <v-spacer></v-spacer>
                            <v-btn color="blue-darken-1" variant="text" @click="clickCloseDeleteCheck">取消</v-btn>
                            <v-btn color="blue-darken-1" variant="text" @click="clickDeleteConfirmCheck">确定</v-btn>
                            <v-spacer></v-spacer>
                        </v-card-actions>
                    </v-card>
                </v-dialog>

                <v-dialog v-model="isShowSwap" max-width="500px">
                    <v-card>
                        <v-card-title class="text-h5">确定将'{{ beSwapItem.companyName }}'改为{{ beSwapItem.isPrivate == 0 ? '私有' : '公有' }}?</v-card-title>
                        <v-card-actions>
                            <v-spacer></v-spacer>
                            <v-btn color="blue-darken-1" variant="text" @click="clickCloseSwap">取消</v-btn>
                            <v-btn color="blue-darken-1" variant="text" @click="clickSwapConfirm">确定</v-btn>
                            <v-spacer></v-spacer>
                        </v-card-actions>
                    </v-card>
                </v-dialog>
            </v-toolbar>

            <v-data-table-server :search="checkSearch" :items-per-page="checkItemsPerPage" :headers="checkHeaders" :items-length="checkTotalItems"
            :items="checkItems"
            :loading="checkLoading"
            class="elevation-1"
            items-per-page-text="每页数量"
            @update:options="loadItemsCheck">
                <template v-slot:item.num="{ index }">
                    <span>{{ index + 1 }}</span>
                </template>
                <template v-slot:item.judgeIds="{ item }">
                    <span v-if="item.judgeIds" v-for="item in item.judgeIds.split(',')">
                        <font v-for="k in judgeList" v-show="k.id == item">{{ k.name }}&nbsp;&nbsp;</font>
                    </span>
                </template>
                <template v-slot:item.isPrivate="{ item }">
                    <v-chip v-if="item.isPrivate == 1" color="red">
                        私有
                    </v-chip>
                    <v-chip v-if="item.isPrivate == 0" color="green">
                        公有
                    </v-chip>
                    <v-btn icon="mdi-swap-horizontal" variant="text" @click="clickSwap(item)"></v-btn>
                </template>
                <template v-slot:item.actions="{ item }">
                    <v-btn icon="mdi-delete" variant="text" @click="clickDeleteCheck(item)"></v-btn>
                </template>
            </v-data-table-server>
        </v-card>
    </v-dialog>
</template>

<style scoped lang="less">

</style>
